<!DOCTYPE html>
<html>
    <head>
        <title>Getting started with Visual Studio Tools for Apache Cordova</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                background: transparent;
                vertical-align: top;
            }

            html, body, .startpage {
                height: 100%;
                white-space: nowrap;
            }

            .startpage {
                background-color: #efeff2;
                font-family: "Segoe UI","Segoe WP",Helvetica,Arial,sans-serif;
                text-align: left;
            }

            #taco-bot {
                position: absolute;
                left: 0;
                z-index: -1;
                height: 289px;
                width: 303px;
                background: url('');
            }

            .side-menu {
                float: left;
                height: 100%;
                width: 310px;
                padding: 50px 20px;
            }

            .side-menu-title {
                font-weight: 100;
                font-size: 28pt;
                color: #621974;
            }

            .side-menu-title-sub {
                margin: 40px 0 10px;
                font-weight: 300;
                font-size: 14pt;
                color: #252525;
            }

            .side-menu-title-sub-body {
                padding: 8px 0;
                font-weight: 500;
                font-size: 12pt;
                color: #0079d5;
            }

            a {
                color: #0079d5;
                text-decoration: none;
            }

            .content {
                position: absolute;
                left: 350px;
                right: 0;
                min-height: 800px;
                min-width: 900px;
                padding: 59px 50px;
                background-color: white;
                white-space: normal;
            }

            .content-block {
                position: relative;
                min-width: 900px;
            }

            .content-text {
                float: left;
                width: 640px;
                margin-right: 45px;
            }

            .content-images {
                display: inline-block;
            }

            .content-title {
                padding-bottom: 10px;
                font-weight: 500;
                font-size: 22pt;
                color: #621974;
            }

            .content-title-body {
                padding-bottom: 50px;
                line-height: 150%;
                font-weight: 500;
                font-size: 14pt;
                color: #464646;
            }

            .step-image {
                float: left;
                position: relative;
            }
        </style>
    </head>

    <body class="startpage">
        <div id="taco-bot">
        </div>

        <div class="side-menu">

            <h1 class="side-menu-title">Apache Cordova</h1>

            <div class="links">
                <h3 class="side-menu-title-sub">Quick Starts</h3>

                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760737">Back to basics in our Beginner Guide</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760739">Build Native UI in Ionic</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760741">Use Typescript in your app</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760740">Move your web app to mobile</a></p>

            </div>

            <div class="links">
                <h3 class="side-menu-title-sub">Add Mobile Services</h3>

                <p class="side-menu-title-sub-body"><a target="_blank" href="https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started/">Add a cloud backend</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started-push/">Push notifications to users</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started-users/">Add login authentication</a></p>

            </div>

            <div class="links">
                <h3 class="side-menu-title-sub">Platform Guides</h3>

                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760745">iOS</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760746">Android</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href=" http://go.microsoft.com/fwlink/?LinkId=760747">Windows</a></p>

            </div>

            <div class="links">
                <h3 class="side-menu-title-sub">Documentation</h3>

                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760742">Tools for Apache Cordova</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760748">The Apache Cordova Project</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760744">Latest Release Notes</a></p>
                <p class="side-menu-title-sub-body"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760743">VS Cordova on StackOverflow</a></p>

            </div>



        </div>

        <div class="content">
            <div class="content-block">
                <div class="content-text">
                    <h1 class="content-title">Step 1: Build first</h1>
                    <p class="content-title-body">During a project's first build, Visual Studio downloads a copy of the Cordova and your project dependencies into your solution. <strong>This can take up to 5min., and requires internet connection.</strong></p>
                </div>

                <img class="step-image" id="step1" width='215' height='64' title='Step 1' alt='Step 1' src=''>
            </div>

            <div class="content-block">
                <div class="content-text">
                    <h1 class="content-title">Step 2: Do the Beginner Guide</h1>
                    <p class="content-title-body">Get familiar with the Cordova project structure in our <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760737">Beginner Guide</a>, to learn how to add your own HTML, CSS and JS files to your project's www/ folder. Then, add your preferred JavaScript libraries to your project and get started with your app.</p>
                </div>

                <img class="step-image" id="step2" width='215' height='107' title='Step 2' alt='Step 2' src=''>
            </div>

            <div class="content-block">
                <div class="content-text">
                    <h1 class="content-title">Step 3: Configure Android and iOS builds</h1>
                    <p class="content-title-body">Set up the ways your can build and deploy your app to devices and emulators running Android and iOS. <br /><br />TACO comes with the Android SDK, so build an Android app directly on your machine using our <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760746">Android build guide</a>. Building and deploying to iOS requires you to connect to Mac OSX. Hook Visual Studio up to a mac or a mac-in-cloud service through our <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkId=760745">iOS remotebuild setup guide.</a></p>
                </div>

                <img class="step-image" id="step3" width='215' height='60' title='Step 3' alt='Step 3' src=''>
            </div>

            <div class="content-block">
                <div class="content-text">
                    <h1 class="content-title">Step 4: Connect your app to Azure</h1>
                    <p class="content-title-body">Use the new Azure App Service Mobile Apps to hook your mobile app up to Azure in minutes. Set up user authentication on your app, push data to your users, and connect to data. <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533127">Start the tutorial here.</a></p>
                </div>

                <img class="step-image" id="step4" width='215' height='140' title='Step 4' alt='Step 4' src=''>
            </div>
        </div>
    </body>
</html>